<template>
  <div class="home-content">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      input-align="center"
      @click="$router.push({name:'search'})"
    />
    <van-swipe :autoplay="3000" @click="test()">
      <van-swipe-item v-for="(image, index) in images" :key="index" @click="test()">
        <van-image
          lazy-load
          fit="fill"
          :src="image"/>
      </van-swipe-item>
    </van-swipe>
    <van-divider
      class="buy-notify">
      购买需知
    </van-divider>
    <div class="service">
      <span>关于售后</span>
      <p>①产品到手后请第一时间检查，精油开封后不予以任何售后。</p>
      <p>②设备质保自购买日期起180天内(非人为造成的故障)，请保留好
        <strong>设备包装盒</strong>，
        以作为售后凭证。售后产品统一寄回品牌方受理。一般品牌售后周期为30天，个别会更久，请耐心等待。</p>
      <p>③产品到手后请第一时间检查，精油开封后不予以任何售后。</p>
      <span class="no-service">非售后范围</span>
      <p class="no-service">
        包括但不限于①已开封精油，②赠品，③特价产品，④耗材(电池，弹弹、空仓、芯等)，⑤因个人口味或审美造成的。
      </p>
    </div>
    <div class="about">
      <p>关于我们</p>
      <div>
        <span>扫描右侧二维码关注公众号，或者微信搜索“雾缘蒸汽”获取客服微信。</span>
        <img :src="require('../../assets/qrcode.jpg')" alt="">
      </div>
    </div>
    <div class="warning">
      <img :src="require('../../assets/18.jpg')">
      <span>禁止未成年人购买和访问</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      active: 0,
      images: [
        'https://pic.vslai.com.cn/upload/5657/2021/05/28/17/1622194045226.jpg',
        'https://pic.vslai.com.cn/upload/5657/2021/05/28/17/1622194046368.jpg'
      ]
    }
  },
  methods: {
    test (event) {
      console.log('event')
      console.log(event)
    }
  }
}
</script>

<style scoped>
.home-content {
  padding-bottom: 20px;
  height: 100%;
}

.buy-notify {
  font-size: 30px;
  color: #ff0000;
  padding: 10px 16px;
  border-color: #ff0000;
}

.about {
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about p {
  font-size: 20px;
  padding: 5px;
  margin: 10px 0 0 0;
}

.about img {
  margin-left: 40px;
  width: 100px;
  height: 100px;
}

.about > div {
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.about > div > span {
  width: 150px;
}

.content {
  height: 100%;
  min-height: 100%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
}

.warning {
  margin-top: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  font-size: 20px;
  color: red;
}

.notify {
  margin: 5px;
  padding: 0px;
  text-align: center;
  font-size: 30px;
  color: red;
}
</style>
